<template>
    <div>
        <Detail :info="novel" :chapterList="chapterList" :goWatcher="goNovelWatcher" :goDownload="goDownload" />
    </div>
</template>

<script setup lang="ts">
import Detail from '@/components/DetailVue.vue'
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from 'axios';

const route = useRoute();
const nid = route.params.nid;

onMounted(
    () => {
        getNovel();
        getChapterList()
    }
)

const novel = ref(
    {
        "nid": 1,
        "name": "刀剑神域",
        "synopsis": "暂无简介",
        "src": "/novels/刀剑神域/",
        "cover": "/novels/刀剑神域/cover.webp",
        "updateStatus": 1,
        "types": ["搞笑", "异世界", "日漫"],
        "authors": ["渡真仁", "晓枣"]
    }
)

const getNovel = function () {
    let nids = new Array();
    nids.push(nid);

    axios.get('/api/novel/' + nids)
        .then((result) => {
            if (result.data.code === 200) {
                novel.value = result.data.data[0];
                console.log(novel.value);
            }
        }).catch((err) => {
            ElMessage.error({
                showClose: true,
                message: "获取小说详内容失败！！！"
            })
            console.log(err);
        });
}

const chapterList = ref(
    [
        "第1话",
        "第2话",
        "第3话",
        "第4话",
        "第5话",
        "第6话",
        "第7话",
        "第8话",
        "第9话",
        "第10话",
        "第11话",
        "第12话",
        "第13话",
        "第14话",
        "第15话",
        "第16话",
        "第17话",
        "第18话",
        "第19话",
        "第20话",
        "第21话",
        "第22话",
        "第23话",
        "第24话",
        "第25话",
        "第26话",
        "第27话",
        "第28话",
        "第29话",
        "第30话",
        "第31话",
        "第32话",
        "第33话",
        "第34话",
        "第35话",
        "第36话",
        "第37话",
        "第38话",
        "第39话",
        "第40话",
        "第41话",
        "第42话",
        "第43话",
        "第44话",
        "第45话",
        "第46话",
        "第47话",
        "第48话",
        "第49话",
        "第50话",
    ])

const getChapterList = function () {
    axios.get('/api/novel/chapter/' + nid)
        .then((result) => {
            if (result.data.code === 200) {
                chapterList.value = result.data.data;
                console.log("获取小说章节目录：");
                console.log(chapterList.value);
            }
        }).catch((err) => {
            ElMessage.error({
                showClose: true,
                message: "获取小说章节目录失败！！！"
            })
            console.log(err);
        });
}

const goNovelWatcher = function (chapterName) {
    const chapterInfo = {
        nid: nid,
        chapterName,
    }

    const status = window.electronApi.novelWatcher(chapterInfo)
    if (status) {
        ElMessage.success({
            message: "工具已启用成功",
            showClose: true,
        })
    } else {
        ElMessage.error({
            message: "工具已启用失败",
            showClose: true,
        })
    }
}

const goDownload = function (chapterName) {

    const downloadURL = novel.value.src + chapterName;
    console.log("downloadURL: " + downloadURL);

    window.electronApi.download(downloadURL);

}


</script>


<style scoped>
.btn {
    height: 50px;
    font-size: 18px;
    width: 180px;
}

.item {
    width: 230px;
    height: 45px;
}
</style>